<ngm-table class="flex-1 overflow-hidden rounded-lg mt-2" displayDensity="cosy"
  paging
  selectable
  [data]="indicators()"
  [columns]="[
    {
      name: 'name',
      caption: ('PAC.KEY_WORDS.NAME' | translate: {Default: 'Name'}),
      cellTemplate: nameTempl
    },
    {
      name: 'code',
      caption: 'PAC.KEY_WORDS.CODE' | translate: {Default: 'Code'}
    },
    {
      name: 'businessArea',
      caption: 'PAC.KEY_WORDS.BUSINESS_AREA' | translate: {Default: 'Business Area'},
      cellTemplate: businessAreaTempl
    },
    {
      name: 'createdAt',
      caption: 'PAC.KEY_WORDS.CreatedAt' | translate: {Default: 'Created At'},
    },
    {
      name: 'isActive',
      caption: 'PAC.INDICATOR.REGISTER.IsActive' | translate: {Default: 'Is Active'},
      cellTemplate: visibleTempl
    },
    {
      name: 'visible',
      caption: 'PAC.INDICATOR.REGISTER.Visible' | translate: {Default: 'Visible'},
      cellTemplate: visibleTempl
    },
    {
      name: 'isApplication',
      caption: 'PAC.INDICATOR.REGISTER.AvailableInApplication' | translate: {Default: 'App Available'},
      cellTemplate: visibleTempl,
      width: '100px'
    },
    {
      name: 'action',
      caption: 'PAC.KEY_WORDS.ACTION' | translate: {Default: 'Action'},
      cellTemplate: actionTempl,
      width: '100px',
      stickyEnd: true
    }
  ]"
  (rowSelectionChanging)="onRowSelectionChanging($event)"
></ngm-table>

<!-- <div *ngIf="loading" class="absolute top-1/2 left-1/2 -mt-4 -ml-4 z-10">
  <mat-spinner diameter="30" strokeWidth="2">
  </mat-spinner>
</div> -->

<ng-template #nameTempl let-id="id" let-name="name">
  @if (isUUID(id)) {
    <a [routerLink]="['/indicator/viewer', id]"><span>{{name}}</span></a>
  } @else {
    <span class="ping-badge pointer-events-none relative inline-flex h-2 w-2 m-2">
      <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"></span>
      <span class="relative inline-flex rounded-full h-2 w-2"></span>
    </span><span>{{name}}</span>
  }
</ng-template>

<ng-template #businessAreaTempl let-businessArea="businessArea">
  {{ businessArea?.name }}
</ng-template>
<ng-template #visibleTempl let-visible>
  <mat-checkbox [disabled]="true" [checked]="visible"></mat-checkbox>
</ng-template>

<ng-template #actionTempl let-id="id" let-name="name">
  <div class="pac__table-actions flex gap-2 group">
    <button mat-icon-button displayDensity="cosy" class="text-slate-500 opacity-50 group-hover:opacity-100"
      [routerLink]="['/project/indicators/', id]">
      <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
    </button>
    
    <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" class="text-slate-500 opacity-50 group-hover:opacity-100 duration-300"
      (click)="onDelete({id, name})">
      <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
    </button>
  </div>
</ng-template>
